<template>
	<router-view @change="changeActive"></router-view>
	<van-tabbar fixed v-model="active" active-color="white" :placeholder=true>
		<van-tabbar-item icon="home-o" :to="{'name':'home'}">首页</van-tabbar-item>
		<van-tabbar-item icon="apps-o" :to="{'name':'category'}">分类</van-tabbar-item>
		<van-tabbar-item icon="star-o" :to="{'name':'favorite'}">收藏</van-tabbar-item>
		<van-tabbar-item icon="manager-o" :to="{'name':'mypage'}">我的</van-tabbar-item>
	</van-tabbar>
</template>

<script setup>
	import { ref } from 'vue';
	const active = ref("");
	import router from '@/router'
	
	function changeActive(data){
		active.value = data
		console.log(active.value)
	}

</script>

<style>
	:root {
		--van-tabbar-background-color: #FFB5C5;
		--van-tabbar-item-active-background-color: #FFB5C5;
		--van-tabbar-height: 64px;
	}
</style>
